<template>
    <div class="container">
        <!-- 顶部 -->
        <tab-head></tab-head>

        <!-- 内容 -->
        <div class="myContent">

            <div class="myContentTop">

                <van-row>
                    <van-col span="12">欢迎，{{ userInfo.userName }}</van-col>
                    <van-col span="6" offset="6" @click="() => { projectListshow = !projectListshow }">
                        <van-row>
                            <van-col span="16">切换项目</van-col>
                            <van-col span="8"><img src="../../assets/images/my/skipProjectIcon.png" /></van-col>
                        </van-row>
                    </van-col>
                </van-row>
            </div>
            <img src="../../assets/images/my/dbsx.png" style="margin-top: 10px;" />
            <div class="myContentBottom">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                    <van-list v-model:loading="loading" style="padding: 10px 15px;" :finished="finished"
                        finished-text="没有更多了" @load="onLoad">
                        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                        <div class="flexLr borderB" @click="skip(el)" :key="inx" v-for="(el, inx) in list"
                            style="padding: 10px 0;font-size: 12px;">
                            <img src="../../assets/images/my/Listicon.png" width="16" alt="">
                            <div class="flexLr" style="letter-spacing: 1px;width: 95%;margin-left: 4px;">
                                <div style="width:80%;">
                                    <div class="Textellipsis">{{ el.noticename }}</div>
                                </div>
                                <div>{{ el.count }}个
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
            <div class="logOut">
                <van-button color="linear-gradient(to top, #FF7D7D, #EE5E5E)" round style="padding: 20px;width: 100%;"
                    @click="logOut">退出登录</van-button>
            </div>
        </div>
        <van-popup v-model:show="projectListshow" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="切换项目" v-model="selectedValues"
                :columns="projectList.map(item => { return { text: item.projectShortName, value: item.id } })"
                @cancel="() => { projectListshow = false }" @confirm="updateProject" />
        </van-popup>
        <!-- 底部导航 -->
        <tab-bar></tab-bar>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useAppStore } from "../../store";
import { getToken, removeToken } from "@/utils/auth";
import { useRouter } from "vue-router";
import { Loading, showNotify } from 'vant';
import { TodoList } from "@/api/index";
export default defineComponent({
    setup() {
        const router = useRouter()
        const { userInfo, projectList, projectInfo, setProjectInfo, setCworkbenchIndex } = useAppStore()
        const selectedValues = ref([projectInfo.id]);
        const projectListshow = ref(false)
        const updateProject = ({ selectedValues, selectedOptions }) => {
            projectListshow.value = false
            selectedValues.value = selectedValues
            setProjectInfo(projectList.filter(item => item.id == selectedValues[0])[0])
            refreshing.value = true;
            loading.value = true;
            finished.value = false;
            setTimeout(() => {
                onLoad(projectList.filter(item => item.id == selectedValues[0])[0].id)
            }, 1300);
        }
        const list = ref([]);
        const loading = ref(true);
        const finished = ref(false);
        const refreshing = ref(false);
        const TodoList_FC = (id) => {
            const form = new FormData();
            let data = {
                xid: id ?? projectInfo.id,
                uid: userInfo.id,
            }
            for (let key in data) {
                form.append(key, data[key]);
            }
            TodoList(form).then((res) => {
                let { projectInfo } = useAppStore()
                list.value = res.data.filter(item => {
                    if (item.count) {
                        if (item.noticename.includes('基坑') && projectInfo.professionalModules != null) {
                            return projectInfo.professionalModules.includes('1')
                        } else if (item.noticename.includes('顶管') && projectInfo.professionalModules != null) {
                            return projectInfo.professionalModules.includes('2')
                        } else if (item.noticename.includes('盾构') && projectInfo.professionalModules != null) {
                            return projectInfo.professionalModules.includes('4')
                        } else {
                            return true
                        }
                    } else {
                        return false
                    }
                });
                finished.value = true;
            })
        }
        TodoList_FC()
        const onLoad = (id) => {
            if (refreshing.value) {
                TodoList_FC(id)
                refreshing.value = false;
            }
            loading.value = false;
            finished.value = true;
        };

        const onRefresh = () => {
            // 清空列表数据
            finished.value = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            loading.value = true;
            onLoad();
        };

        const logOut = () => {
            removeToken();
            router.push('/login');
            showNotify({ type: 'primary', message: '退出成功', duration: 1000 });
        }

        const skip = (el) => {
            if (el.noticename.includes('监控-安全隐患处理')) {
                setCworkbenchIndex(2)
            } else if (el.noticename.includes('危大工程处理')) {
                setCworkbenchIndex(0)
            } else if (el.noticename.includes('环境-风力预警')) {
                setCworkbenchIndex(1)
            } else if (el.noticename.includes('基坑-预警处理')) {
                setCworkbenchIndex(3)
            } else if (el.noticename.includes('基坑-监测报表上传')) {
                setCworkbenchIndex(3)
            } else if (el.noticename.includes('顶管-预警处理')) {
                setCworkbenchIndex(4)
            } else if (el.noticename.includes('盾构-预警处理')) {
                setCworkbenchIndex(6)
            }
            router.push({
                path: '/Cworkbench',
                query: {
                    ...el
                }
            })
        }

        onMounted(() => {
        });


        return {
            userInfo,
            projectListshow,
            projectList,
            updateProject,
            projectInfo,
            setProjectInfo,
            list,
            onLoad,
            loading,
            finished,
            onRefresh,
            refreshing,
            logOut,
            selectedValues,
            skip
        };
    },
});
</script>

<style lang="less" scoped>
.container {
    font-size: 24px;

    .borderB {
        border-bottom: 4px solid #728b9a6b;
    }

    .myContent {
        padding: 30px;
        color: #fff;
        height: calc(100% - 200px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .myContentTop {
            font-size: 26px;
            line-height: 54px;
        }

        .myContentBottom {
            height: 85%;
            overflow: hidden;
            overflow-y: scroll;
        }

        .logOut {
            margin-top: 40px;
        }
    }

    .van-cell {
        background-color: rgba(18, 48, 95, 0.4);

        color: #fff;

        &::after {
            border-width: 4px;
            border-bottom-color: #728B9A;
        }
    }
}
</style>